<template>
  <div class="home-container">
    <div class="hero-section">
      <h1>威胁情报知识图谱</h1>
      <p class="hero-description">从非结构化文本中提取威胁情报，构建知识图谱，评估可信度</p>
      
      <div class="action-buttons">
        <router-link v-if="isAuthenticated" to="/extract" class="btn-primary">提取威胁情报</router-link>
        <router-link v-if="isAuthenticated" to="/graph" class="btn-secondary">查看知识图谱</router-link>
        <router-link v-if="!isAuthenticated" to="/login" class="btn-primary">登录</router-link>
        <router-link v-if="!isAuthenticated" to="/register" class="btn-secondary">注册</router-link>
      </div>
    </div>
    
    <div class="features-section">
      <h2>主要功能</h2>
      
      <div class="feature-cards">
        <div class="feature-card">
          <div class="feature-icon">📤</div>
          <h3>威胁情报提取</h3>
          <p>从非结构化文本中自动提取威胁情报实体和关系，包括恶意软件、漏洞、攻击模式等。</p>
        </div>
        
        <div class="feature-card">
          <div class="feature-icon">🔄</div>
          <h3>STIX 标准转换</h3>
          <p>将提取的威胁情报转换为标准化的 STIX 格式，便于共享和集成。</p>
        </div>
        
        <div class="feature-card">
          <div class="feature-icon">🧠</div>
          <h3>MTMKG 可信评估</h3>
          <p>基于多源知识图谱的三元组可信评估模型，自动评估每个威胁情报的可信度。</p>
        </div>
        
        <div class="feature-card">
          <div class="feature-icon">📊</div>
          <h3>可视化分析</h3>
          <p>交互式知识图谱可视化，支持筛选、搜索、分析和导出。</p>
        </div>
      </div>
    </div>
    
    <div class="workflow-section">
      <h2>工作流程</h2>
      
      <div class="workflow-steps">
        <div class="workflow-step">
          <div class="step-number">1</div>
          <div class="step-content">
            <h3>提交非结构化文本</h3>
            <p>提交包含威胁情报的文本，如威胁报告、事件分析或新闻文章</p>
          </div>
        </div>
        
        <div class="workflow-step">
          <div class="step-number">2</div>
          <div class="step-content">
            <h3>自动提取和转换</h3>
            <p>系统使用 stoQ 和正则表达式提取威胁情报并转换为 STIX 格式</p>
          </div>
        </div>
        
        <div class="workflow-step">
          <div class="step-number">3</div>
          <div class="step-content">
            <h3>构建知识图谱</h3>
            <p>提取的实体和关系存储到 Neo4j 图数据库中构建知识图谱</p>
          </div>
        </div>
        
        <div class="workflow-step">
          <div class="step-number">4</div>
          <div class="step-content">
            <h3>评估可信度</h3>
            <p>使用 MTMKG 模型评估图谱中每个三元组的可信度</p>
          </div>
        </div>
        
        <div class="workflow-step">
          <div class="step-number">5</div>
          <div class="step-content">
            <h3>可视化和分析</h3>
            <p>通过 D3.js 可视化界面探索和分析知识图谱</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  computed: {
    isAuthenticated() {
      return !!localStorage.getItem('token');
    }
  }
};
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.hero-section {
  text-align: center;
  padding: 60px 20px;
  background-color: #f8f9fa;
  border-radius: 10px;
  margin-bottom: 40px;
}

h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 20px;
}

.hero-description {
  font-size: 1.2rem;
  color: #555;
  max-width: 700px;
  margin: 0 auto 30px;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-block;
  padding: 12px 24px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  display: inline-block;
  padding: 12px 24px;
  background-color: #6c757d;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.2s;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 1.8rem;
}

.features-section {
  margin-bottom: 60px;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.feature-card {
  background-color: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 15px;
}

.feature-card h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
}

.feature-card p {
  color: #555;
  margin: 0;
}

.workflow-section {
  margin-bottom: 60px;
}

.workflow-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.workflow-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.step-number {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #007bff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  flex-shrink: 0;
}

.step-content {
  flex-grow: 1;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.step-content h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
}

.step-content p {
  color: #555;
  margin: 0;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  
  .hero-description {
    font-size: 1rem;
  }
  
  .workflow-step {
    flex-direction: column;
    align-items: center;
  }
  
  .step-content {
    width: 100%;
  }
}
</style> 